import React, { memo } from 'react';
import { useSelector, shallowEqual } from "react-redux";

import { formatImageSize, formatMinuteSecond } from "@/utils/format-utils";

import { ListWrapper } from "./style";
import ThemeHeaderRanking from "@/components/theme-header-ranking";

const RankingList = memo(() => {
  const { listInfo } = useSelector(state => ({
    listInfo: state.getIn(["ranking", "listInfo"])
  }), shallowEqual);

  return (
    <ListWrapper showBtmBor={listInfo.tracks.length}>
      <ThemeHeaderRanking />
      
      <div className="play-list">
        <table>
          <thead>
            <tr className="header">
              <th className="ranking"></th>
              <th className="title">标题</th>
              <th className="duration">时长</th>
              <th className="singer">歌手</th>
            </tr>
          </thead>

          <tbody>
            {
              listInfo.tracks.map((item, index) => {
                return (
                  <tr key={item.id}>
                    <td>
                      <div className="rank">
                        <span className="order">{ index + 1 }</span>
                        <span className="new sprite_icon2"></span>
                      </div>
                    </td>
                    <td>
                      <div className="song-name">
                        {
                          index < 3 && <img src={formatImageSize(item.al.picUrl, 50)} alt="" />
                        }
                        <span className="play sprite_table"></span>
                        <span className="name">{ item.name }</span>
                      </div>
                    </td>
                    <td>
                      {formatMinuteSecond(item.dt)}
                    </td>
                    <td>
                      {item.ar[0].name}
                    </td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
      </div>
    </ListWrapper>
  )
})

export default RankingList